<template>
  <div>
    <el-row>
        <el-col>
            <!-- 搜索条件 -->
            <el-form :inline="true"  class="demo-form-inline" size="small">
            <el-form-item>
                <el-input  placeholder="医院" v-model="hospitalMeta.hospitalName" clearable=""></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input  placeholder="医院地址" v-model="hospitalMeta.hospitalAddress" clearable=""></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="el-icon-search" @click="queryConditionHospitals">查询</el-button>
            </el-form-item>
        </el-form>
        </el-col>
    </el-row>
    <el-row>
        <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="dialogVisible = true">新增医院</el-button>
    </el-row>
    <el-row>
        <el-col>
            <!-- 数据 -->
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    type="index">
                </el-table-column>
                <el-table-column
                    prop="hospitalName"
                    label="医院名字">
                </el-table-column>
                <el-table-column
                    prop="hospitalAddress"
                    label="医院地址">
                </el-table-column>
                <el-table-column
                    prop="mysqlStatus"
                    label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.mysqlStatus == 1">已建库</span>
                        <span v-else>未建库</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-s-tools" :disabled="scope.row.mysqlStatus==1" @click="addDBById(scope.row.hospitalId)">建库</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <el-row>
        <el-col>
            <!-- 分页 -->
            <el-pagination
            @size-change="onSizeChange"
            @current-change="currentPage"
            @prev-click="prePage"
            @next-click="nextPage"
            :current-page="pageNum"
            :page-sizes="[5, 10, 12, 16]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-col>
    </el-row>


    <el-dialog title="添加医院" :visible.sync="dialogVisible">
        <el-form :model="form" label-width="80px">
            <el-form-item label="医院名称" :label-width="formLabelWidth">
            <el-input v-model="hospitalName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="医院地址" :label-width="formLabelWidth">
            <el-input v-model="hospitalAddress" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addHospital">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="建库" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="80px">
            <el-form-item label="url" :label-width="formLabelWidth">
            <el-input v-model="url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="schema" :label-width="formLabelWidth">
            <el-input v-model="schema" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="username" :label-width="formLabelWidth">
            <el-input v-model="username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="password" :label-width="formLabelWidth">
            <el-input v-model="password" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDB">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data(){
        return{
            dialogFormVisible:false,
            dialogVisible:false,
            hospitalMeta:{},
            pageNum:'1',
            pageSize:'5',
            total:'',
            tableData: [],
            hospitalName:'',
            hospitalAddress:'',
            url:'',
            password:"",
            username:"",
            schema:'',
            id:''
        }
    },
    methods:{
        onSizeChange(val){
            this.pageNum=1;
            this.pageSize=val;
            this.queryHospitals()

        },
        currentPage(val){
            this.pageNum=val;
            this.queryHospitals()

        },
        prePage(val){
            this.pageNum=val;
            this.queryHospitals()

        },
        nextPage(val){
            this.pageNum=val;
            this.queryHospitals()
        },
        queryConditionHospitals(){
            this.pageNum=1
            this.queryHospitals()
        },
        queryHospitals(){
            let pageParam = {}
            pageParam.param=this.hospitalMeta
            pageParam.pageSize=this.pageSize
            pageParam.pageNum=this.pageNum
            this.$axios.post('api/hospital/queryHospital',pageParam)
            .then(res=>{
                if(res.data.code==200){
                    let pageInfo = res.data.data
                    this.total=pageInfo.total
                    this.tableData=pageInfo.list
                    this.pageNum=pageInfo.pageNum
                    this.pageSize=pageInfo.pageSize
                    this.hospitalMeta={}
                }
            })
        },
        addHospital(){
            if(this.hospitalAddress=='' || this.hospitalName==''){
                this.$message.warning("请添加正确信息")
                return;
            }
            let hospital = {}
            hospital.hospitalAddress=this.hospitalAddress
            hospital.hospitalName=this.hospitalName
            this.$axios.post("api/hospital/addHospital",hospital)
            .then(res=>{
                if(res.data.code==200){
                    this.$message.success("医院添加成功")
                    this.queryConditionHospitals()
                    this.dialogVisible=false
                }
            })
        },
        addDBById(val){
            this.dialogFormVisible=true
            this.id=val;
        },
        //添加数据库
        addDB(){
            if(this.url=='' || this.schema=='' || this.username=='' || this.password==''){
                this.$message.warning("请正确输入初始化数据库数据")
                return;
            }
            let hospitalMeta = {}
            hospitalMeta.hospitalId=this.id
            hospitalMeta.mysqlUrl=this.url
            hospitalMeta.mysqlSchema=this.schema;
            hospitalMeta.mysqlUsername=this.username;
            hospitalMeta.mysqlPassword=this.password;
            this.$axios.post("api/hospital/addDB",hospitalMeta)
            .then(res=>{
                if(res.data.code==200){
                    this.$message.success("数据库初始化成功")
                    this.url=''
                    this.schema=''
                    this.username=''
                    this.password=''
                    this.id=''
                    this.dialogFormVisible=false
                    this.queryConditionHospitals()
                }
            })
        }
    },
    created(){
        this.queryConditionHospitals();
    }
}
</script>

<style>

</style>